<template>
  <div class="ruler-container" v-show="showRuler">
    <div class="horizontal-ruler" :style="{ width: canvasWidth + 'px' }">
      <div
        v-for="i in Math.ceil(canvasWidth / scaleStep)"
        :key="i"
        :style="{
          left: (i * scaleStep) + 'px',
          height: i % majorTickInterval === 0 ? '20px' : '10px'
        }"
        class="tick"
      >
        <span v-if="i % majorTickInterval === 0">{{ i * scaleStep * scaleFactor }}</span>
      </div>
    </div>
    <div class="vertical-ruler" :style="{ height: canvasHeight + 'px' }">
      <div
        v-for="i in Math.ceil(canvasHeight / scaleStep)"
        :key="i + 'v'"
        :style="{
          top: (i * scaleStep) + 'px',
          width: i % majorTickInterval === 0 ? '20px' : '10px'
        }"
        class="tick"
      >
        <span v-if="i % majorTickInterval === 0">{{ i * scaleStep * scaleFactor }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    canvasWidth: {
      type: Number,
      required: true
    },
    canvasHeight: {
      type: Number,
      required: true
    },
    scaleFactor: {
      type: Number,
      default: 1
    },
    minValue: {
      type: Number,
      default: 0
    },
    maxValue: {
      type: Number,
      default: 100
    },
    showRuler: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      scaleStep: 10, // 最小刻度间隔
      majorTickInterval: 5 // 主要刻度间隔
    };
  }
};
</script>

<style scoped>
.ruler-container {
  position: relative;
}

.horizontal-ruler {
  position: absolute;
  top: -20px;
  left: 0;
  height: 20px;
  border-bottom: 1px solid #000;
}

.vertical-ruler {
  position: absolute;
  top: 0;
  left: -20px;
  width: 20px;
  border-right: 1px solid #000;
}

.tick {
  position: absolute;
  background-color: #000;
}

.tick span {
  position: absolute;
  font-size: 12px;
  transform: translateX(-50%);
}

.vertical-ruler .tick span {
  transform: translateY(-50%) rotate(-90deg);
}
</style>
